<template>
  <yd-layout id="home">
      <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>

      <yd-tabbar slot="tabbar" class="main-footer" active-class="activeClass" active-color="#979797">
        <yd-tabbar-item title="首页" link="/index/dayplan" class="tabbarItem" :active="currentActive=='0'">
            <yd-icon name="home" slot="icon" size="0.54rem"></yd-icon>
        </yd-tabbar-item>
        <yd-tabbar-item title="推荐" link="/recommend" class="tabbarItem" :active="currentActive==1">
            <yd-icon name="shopcart-outline" slot="icon" size="0.54rem"></yd-icon>
        </yd-tabbar-item>
        <yd-tabbar-item title="水族" link="/friends" class="tabbarItem" :active="currentActive==2">
            <yd-icon name="ucenter-outline" slot="icon" size="0.54rem"></yd-icon>
        </yd-tabbar-item>
        <yd-tabbar-item title="我的" link="/my" class="tabbarItem" :active="currentActive==3">
            <img slot="icon" style="height: 25px;" src="http://static.ydcss.com/ydui/img/logo.png">
        </yd-tabbar-item>
    </yd-tabbar>
  </yd-layout>
</template>
<script>
    import { mapState } from 'vuex'
    export default {
        name: 'home',
        data(){
          return{
          }
        },
        created(){
          // console.log(this.currentActive)
        },
        computed:{
          ...mapState(['currentActive'])
        },
        methods:{
          
        }
    }
</script>
<style lang="scss">
@import "../style/reset.scss";
@import "../style/public.scss";
#home {
  .main-footer{
    height:rem(120);
    border-top:rem(2) solid #f2f2f2;
    z-index:10;
  }
  .activeClass{
    .yd-tabbar-icon{
      color:$defaultcolor;
    }
    .yd-tabbar-txt{
      color:$defaultcolor;
    }
  }
  .tabbarItem{
    font-size:rem(24);
  }
  &>.yd-scrollview:after{
    height:0;
  }
}
</style>
